@import "./common/anims";
@import "./common/common";

.divScreenWrapper {
    box-sizing: border-box;
    background-color: #aaa;

    flex-grow: 1;

    width: calc(100% - 2em);
    height: 150px;

    margin: 1em 0.5em 2em 0.5em;
    padding: 12px 16px 11px 16px;
    box-shadow: inset 1px 1px 1px 0 rgb(40 49 85 / 40%);
    border-radius: 18px;
    background: #fff;
}

.divNormalWrapper {
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;

    > div[role="entries"] {
        display: flex;
        justify-content: flex-start;
        flex-wrap: wrap;

        min-height: 1.5em;
        max-height: 48%;
        overflow: auto;
        //background-color: rebeccapurple;

        @include slim-scroll-bar;

        > img {
            cursor: text;
        }
    }

    > div[role="result"] {
        font-size: 42px;
        word-wrap: break-word;
        text-align: end;
        flex-grow: 1;
        overflow: auto;

        @include slim-scroll-bar;
    }

    > div[role="error"] {
        color: red;
        font-size: 18px;
        word-wrap: break-word;
        text-align: start;

        flex-grow: 1;
        overflow: auto;

        @include slim-scroll-bar;
    }

    > div[role="mode"] {
        font-size: 12px;
        font-weight: bold;
        height: 8%;
        margin-top: auto;

        transform: translateY(8px);

        user-select: none;

        background-color: #f7f7f7;
        border-radius: 8px;

        > span:nth-child(1) {
            color: brown;
            position: absolute;
            left: 10px;
        }

        > span:nth-child(2) {
            color: goldenrod;
            position: absolute;
            left: 60px;
        }

        > span:nth-child(3) {
            color: mediumblue;
            position: absolute;
            right: 10px;
        }
    }
}

.imgNormal {
    margin-bottom: 5px;
}

.imgCursor {
    animation-duration: 0.75s;
    animation-iteration-count: infinite;
}

.imgInsert {
    @extend .imgNormal;
    @extend .imgCursor;
    animation-name: insert-course;
}

.imgOverwrite {
    @extend .imgNormal;
    @extend .imgCursor;
    animation-name: overwrite-course;
}

.divDrgWrapper {
    width: 100%;
    height: 100%;

    display: flex;

    justify-content: space-evenly;
    align-items: center;

    > div {
        width: 80px;
        height: 80px;
        border-radius: 50%;

        font-size: 18px;
        font-weight: bold;

        text-align: center;
        line-height: 80px;

        box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.2);

        user-select: none;
        cursor: pointer;

        transition-duration: 200ms;

        &:hover {
            filter: brightness(90%);
        }
    }

    > div:nth-child(1) {
        background-color: #f5f1c8;
    }

    > div:nth-child(2) {
        background-color: #ffdee7;
    }

    > div:nth-child(3) {
        background-color: #d4e7e2;
    }
}

.divClearWrapper {
    width: 100%;
    height: 100%;

    display: flex;

    justify-content: space-evenly;
    align-items: center;

    > div {
        width: 80px;
        height: 80px;
        border-radius: 50%;

        font-size: 15px;
        font-weight: bold;

        text-align: center;
        line-height: 80px;

        box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.2);

        user-select: none;
        cursor: pointer;

        transition-duration: 200ms;

        &:hover {
            background-color: #cce8f4;
        }
    }
}

.divLangWrapper {
    width: 100%;
    height: 100%;

    display: flex;

    justify-content: space-evenly;
    align-items: center;

    > div {
        width: 100px;
        height: 100px;
        border-radius: 50%;

        font-size: 20px;
        font-weight: bold;

        text-align: center;
        line-height: 100px;

        box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.2);

        user-select: none;
        cursor: pointer;

        transition-duration: 200ms;

        &:hover {
            background-color: #fce2de;
        }
    }
}

.divAboutWrapper {
    width: 100%;
    height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    > title {
        display: block;
        font-size: 15px;
        text-align: center;
        margin: 8px 0;
    }

    > title:nth-child(1) {
        font-weight: bold;
    }

    > div {
        margin: 8px 0;

        > a {
            color: #0d6efd;
            text-decoration: underline;

            &:hover {
                color: #0a58ca;
            }
        }

        > a:nth-child(1) {
            margin: 0 5px;
        }
    }
}
